import {Form, Row, Col, Input, Select} from 'antd'
import React, {useState, useEffect, memo} from 'react'
import styles from './index.less'
import {isGasCylinderCar, complianceStatus} from '../../../dict'
import UploadAvatar from '@/components/UploadAvatar'
import {getImageUrlList, IImageItemParams} from '@/utils/image'
import {ImeagTargetAttrIndex} from '../../../licence/child/index'
import 'moment/locale/zh-cn'

const License = memo((props: {data: any}) => {
	const {data} = props
	const [form] = Form.useForm<any>()
	form.setFieldsValue({
		...data?.carCertificate,
	})
	const [fileList, setFileList] = useState<any>([])
	// 初始化-图片链接列表
	const getFileList = (imageList: Array<IImageItemParams>) => {
		const list = getImageUrlList(imageList)
		setFileList(list)
	}
	// 图片回显
	useEffect(() => {
		getFileList([
			{
				id: data?.carCertificate?.drivingLicenseFront,
				targetAttr: ImeagTargetAttrIndex.drivingLicenseFront,
				name: '行驶证正面',
			},
			{
				id: data?.carCertificate?.drivingLicenseBehind,
				targetAttr: ImeagTargetAttrIndex.drivingLicenseBehind,
				name: '行驶证副本',
			},
			{
				id: data?.carCertificate?.gasVehicle,
				targetAttr: ImeagTargetAttrIndex.gasVehicle,
				name: '气瓶证信息',
			},
			{
				id: data?.carCertificate?.onLineCarLicence,
				targetAttr: ImeagTargetAttrIndex.onLineCarLicence,
				name: '网约车运输证',
			},
			{
				id: data?.carCertificate?.motorVehicle,
				targetAttr: ImeagTargetAttrIndex.motorVehicle,
				name: '机动车登记证',
			},
		])
	}, [form])
	// 行驶证正面
	const drivingLicenseFrontUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'image/jpg,image/jpeg,image/png',
		targetAttr: ImeagTargetAttrIndex.drivingLicenseFront,
		list: fileList,
		moreNum: 1,
		callback: () => {},
	}
	// 行驶证副本
	const drivingLicenseBehindUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'image/jpg,image/jpeg,image/png',
		targetAttr: ImeagTargetAttrIndex.drivingLicenseBehind,
		list: fileList,
		moreNum: 1,
		callback: () => {},
	}
	// 气瓶证信息
	const gasVehicleUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'image/jpg,image/jpeg,image/png',
		targetAttr: ImeagTargetAttrIndex.gasVehicle,
		list: fileList,
		moreNum: 1,
		callback: () => {},
	}
	// 网约车运输证
	const onLineCarLicenceUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'image/jpg,image/jpeg,image/png',
		targetAttr: ImeagTargetAttrIndex.onLineCarLicence,
		list: fileList,
		moreNum: 1,
		callback: () => {},
	}
	// 机动车登记证
	const motorVehicleUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'image/jpg,image/jpeg,image/png',
		targetAttr: ImeagTargetAttrIndex.motorVehicle,
		list: fileList,
		moreNum: 1,
		callback: () => {},
	}
	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<Form
					form={form}
					name="basic"
					layout="horizontal"
					labelCol={{flex: '180px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					disabled>
					<Row gutter={12}>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="行驶证正面"
								name="drivingLicenseFront">
								<UploadAvatar
									{...drivingLicenseFrontUploadProps}
								/>
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="行驶证副本"
								name="drivingLicenseBehind">
								<UploadAvatar
									{...drivingLicenseBehindUploadProps}
								/>
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="行驶证最近更新时间"
								name="licenseUpdateTime">
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							{data?.carCertificate?.getDataFrom === 0 ? (
								<Form.Item
									label="行驶证编号"
									name="fileNumberInLicense">
									<Input placeholder="请输入" />
								</Form.Item>
							) : (
								<Form.Item label="行驶证编号" name="licenseNo">
									<Input placeholder="请输入" />
								</Form.Item>
							)}
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="行驶证/车辆注册日期"
								name={
									data?.carCertificate?.getDataFrom === 0
										? 'registerTime'
										: 'licenseRegisterTime'
								}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="行驶证到期日期"
								name={
									data?.carCertificate?.getDataFrom === 0
										? 'motExpirationTime'
										: 'licenseEndTime'
								}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} />
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item label="气瓶证信息" name="gasVehicle">
								<UploadAvatar {...gasVehicleUploadProps} />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} />
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="气瓶证最近更新时间"
								name="gasUpdateTime">
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="是否气瓶车辆"
								name="isGasCylinderCar">
								<Select
									placeholder="请选择"
									fieldNames={{value: 'key', label: 'label'}}
									options={[...isGasCylinderCar]}
								/>
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="气瓶检到期日期"
								name="gasExpirationTime">
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} />
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="网约车运输证"
								name="onLineCarLicence">
								<UploadAvatar
									{...onLineCarLicenceUploadProps}
								/>
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="网约车证最近更新时间"
								name="carHailingUpdateTime">
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="符合网约车"
								name="compliance"
								rules={[{required: true}]}>
								<Select
									placeholder="请选择"
									fieldNames={{value: 'key', label: 'label'}}
									options={[...complianceStatus]}
								/>
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="网约车运输资格证证号"
								name="carHailingLicNo"
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="网约车证发证日期"
								name="carHailingRegisterTime"
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="网约车证有效期"
								name={
									data?.carCertificate?.getDataFrom === 0
										? 'carHailingValidTime'
										: 'carHailingEffectTime'
								}
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="运营检日期"
								name={
									data?.carCertificate?.getDataFrom === 0
										? 'carHailingCheckValidTime'
										: 'carHailingInspectionTime'
								}
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="网约车证初审申请日期"
								name={
									data?.carCertificate?.getDataFrom === 0
										? 'carHailingApplyTime'
										: 'carHailingFirstApplyTime'
								}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="网约车证复审通过日期"
								name="carHailingSecondApproveTime"
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="网约车运输证所有人"
								name={
									data?.carCertificate?.getDataFrom === 0
										? 'carHailingLicOwner'
										: 'carHailingOwner'
								}
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="网约车运输证签发机关"
								name={
									data?.carCertificate?.getDataFrom === 0
										? 'carHailingLicAgency'
										: 'carHailingIssuing'
								}
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} />
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="机动车登记证"
								name="motorVehicle"
								rules={[{required: true}]}>
								<UploadAvatar {...motorVehicleUploadProps} />
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>
		</div>
	)
})
export default License
